<template>
  <div>
   <header-bar></header-bar>
    <loading v-if="isLoading"></loading>
    <div class="search">
     <div class="content">
       <p>影视</p>
       <ul class="result">
         <li v-for="sub in subjects" :key="sub.id">
          <router-link :to="{name:'MovieView',params:{id:sub.id}}" class="toDetail">
            <div class="ResImg">
              <img :src="sub.images.small" alt="" width="40" height="40">
            </div>
            <div class="ResTxt">
              <p>{{sub.title}}</p>
              <rating v-if="sub.rating" :rating="sub.rating"></rating>
            </div>
          </router-link>
         </li>
       </ul>
       <!--到底了-->
       <p class="end">已显示所有影视搜索结果</p>
     </div>
    </div>
  </div>
</template>

<script>
  import Rating from '../../public/Rating'
  import Loading from '../../public/Loading'
  import HeaderBar from '../HeaderBar'
  export default {
    name: 'SearchView',
    data(){
      return{
        subjects:[],
        isLoading:true
      }
    },
    components:{
      Rating,
      Loading,
      HeaderBar
    },
    created(){
      const val = this.$route.params.val
      this.axios.get('/api/movie/search?q='+val)
        .then((res)=>{
          this.isLoading = false
          let subjects = res.data.subjects
          this.subjects = subjects
          // console.log(res.data)
        })
        .catch((err)=>console.log(err))
    }
  }
</script>

<style lang="scss">
.search{
  margin-top: 47px;
  padding: 15px;
  .content{
    p{
      font-size: 15px;
      line-height: 15px;
      color: #aaa;
    }
    .result{
      border-top: 1px solid #F2F2F2;
      padding-bottom: 30px;
      li{
        margin: 10px;
        .ResImg{
          flex: 0 0 50px;
        }
        .ResTxt{
          padding-left: 10px;
          p{
           font-size: 17px;
           color: #494949;
         }
          .star-full {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-image: url();
            background-size: cover;
          }

          .star-gray {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-image: url();
            background-size: cover;
          }

          .star-half {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-image: url();
            background-size: cover;
          }
          .average {
            font-size: 12px;
          }
        }
        .toDetail{
          display: flex;
          height:60px;
          align-items: center;
          width: 100%;
          height: 100%;
        }
      }
    }
    .end{
      text-align: center;
      font-size: 15px;
      padding: 10px;
      color: #42bd56;
    }
  }
}
</style>
